<template>
  <!-- 短信登入 -->
  <div class="message-login">
    <el-form-item label="手机号">
      <el-input
        maxlength="11"
        v-model="phoneNumber"
        class="captcha phone"
      ></el-input>
      <span
        @click="sendSms"
        v-text="msg"
        class="captcha-svg"
        style="color:#888;userSelect:none;font-weight:bolder;line-height 45px;text-decoration:underline"
      ></span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="code"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="button" @click="submit">提交</el-button>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "@/api/users.js";
export default {
  props: {
    storageUserInfo: {
      required: true
    }
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        //关掉开关，防止一直点击发送按钮重置时间
        this.flag = false;
        //调用接口，获取手机验证码
        let res = await api.getSmsCode(this.phoneNumber);
        console.log(res);
        if (res.data.state) {
          //短信发送成功
          this.$message({
            type: "success",
            message: "短信发送成功"
          });
        } else {
          this.$message.error(res.data.msg);
        }
        let delay = 5;
        this.msg = `${delay}秒后重新发送`;
        this.interval = setInterval(() => {
          delay--;
          if (delay < 1) {
            this.msg = "点击发送验证码~";
            this.flag = true;
            clearInterval(this.interval);
          } else {
            this.msg = `${delay}秒后重新发送`;
          }
        }, 1000);
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      console.log(res);
      //调用父组件的方法，储存用户信息
      this.storageUserInfo(res.data);
      //跳转页面
      this.$router.push("/");
    }
  },
  data() {
    return {
      phoneNumber: "",
      msg: "点击发送验证码~",
      //一个开关
      flag: true,
      //短信验证码
      code: ""
    };
  }
};
</script>
<style scoped lang="less">
.button {
  width: 300px;
}
.phone {
  width: 150px;
  vertical-align: baseline;
  // border-radius: 5px 0 0 5px;
}
.captcha-svg {
  width: 150px;
  height: 38px;
  display: inline-block;
  vertical-align: baseine;
  background-color: white;
  border-radius: 0 5px 5px 0;
  text-align: right;
}
</style>
